import React, { PureComponent } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
import { adapt } from '~/utils/ScreenAdapter';
import { DefaultStyles } from '~/styles/GlobalStyles';

export default class YiInput extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }
  render() {
    return (
      <View style={[styles.wrap, this.state.active ? styles.focus : {}]}>
        <TextInput
          autoCompleteType="off"
          autoCapitalize="none"
          {...this.props}
          placeholderTextColor={DefaultStyles.Black32}
          style={[
            styles.input,
            !this.props.multiline ? styles.sigle : styles.mutiple,
            this.props.value
              ? { ...DefaultStyles.Medium }
              : { ...DefaultStyles.Regular },
          ]}
          onFocus={() => this.setState({ active: true })}
          onBlur={() => this.setState({ active: false })}
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrap: {
    width: '100%',
    borderBottomWidth: 1,
    borderBottomColor: DefaultStyles.Black04,
    borderStyle: 'solid',
  },
  input: {
    fontSize: adapt(16),
    color: DefaultStyles.Black84,
    padding: 0,
    margin: 0,
  },
  sigle: {
    height: adapt(56),
  },
  mutiple: {
    height: adapt(200),
  },
  focus: {
    borderBottomColor: DefaultStyles.Black84,
  },
});
